<script setup>
// 默认普通定义的数据非响应式
// 定义响应式数据
// reactive(需要导入)
// 用法：  const state=reactive({num:1})  state.num++
// reactive(只接收复杂数据类型)
// ref(需要导入)

import { ref } from 'vue'

// 用法：  const num=ref(1)   num={value:1}  访问：  num.value++
// html中可以省略ref的value，js中不可省略
const num = ref(1)
const obj = ref({
  name: 'jack'
})
const btnClick = () => {
  console.log(obj)
  console.log(num)
  num.value++
}
</script>

<template>
  <div class="about-page">
    <h1>{{ num }}</h1>
    <button @click="btnClick">修改num</button>
  </div>
</template>

<style scoped></style>
